<template>
  <div class="tree-controls">
    <div class="control-group">
      <h3>树操作</h3>
      <div class="button-group">
        <button @click="addRootNode" class="btn btn-primary">
          添加根节点
        </button>
        <button @click="addChildNode" :disabled="!selectedNode" class="btn btn-secondary">
          添加子节点
        </button>
        <button @click="removeNode" :disabled="!selectedNode" class="btn btn-danger">
          删除节点
        </button>
        <button @click="expandAll" class="btn btn-outline">
          展开全部
        </button>
        <button @click="collapseAll" class="btn btn-outline">
          折叠全部
        </button>
      </div>
    </div>

    <div class="control-group">
      <h3>搜索</h3>
      <div class="search-group">
        <input
          v-model="searchTerm"
          @input="handleSearch"
          placeholder="搜索节点..."
          class="search-input"
        />
        <button @click="clearSearch" class="btn btn-outline">
          清除
        </button>
      </div>
    </div>

    <div class="control-group">
      <h3>树信息</h3>
      <div class="tree-info">
        <div class="info-item">
          <span class="label">节点数量:</span>
          <span class="value">{{ nodeCount }}</span>
        </div>
        <div class="info-item">
          <span class="label">树深度:</span>
          <span class="value">{{ maxDepth }}</span>
        </div>
        <div class="info-item">
          <span class="label">叶子节点:</span>
          <span class="value">{{ leafNodes.length }}</span>
        </div>
        <div class="info-item" v-if="selectedNode">
          <span class="label">选中节点:</span>
          <span class="value">{{ selectedNode.name }}</span>
        </div>
      </div>
    </div>

    <div class="control-group" v-if="selectedNode">
      <h3>节点详情</h3>
      <div class="node-details">
        <div class="detail-item">
          <strong>ID:</strong> {{ selectedNode.id }}
        </div>
        <div class="detail-item">
          <strong>名称:</strong> {{ selectedNode.name }}
        </div>
        <div class="detail-item">
          <strong>父节点:</strong> {{ selectedNode.parentId || '无' }}
        </div>
        <div class="detail-item">
          <strong>子节点数:</strong> {{ selectedNode.children.length }}
        </div>
        <div class="detail-item">
          <strong>创建时间:</strong> {{ formatDate(selectedNode.createdAt) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useTreeStore } from '../stores/treeStore';

const treeStore = useTreeStore();

const searchTerm = ref('');

const selectedNode = computed(() => treeStore.selectedNode);
const nodeCount = computed(() => treeStore.nodeCount);
const maxDepth = computed(() => treeStore.maxDepth);
const leafNodes = computed(() => treeStore.leafNodes);

const addRootNode = () => {
  const name = prompt('请输入根节点名称:');
  if (name) {
    treeStore.addNode('root', { name });
  }
};

const addChildNode = () => {
  if (treeStore.selectedNode) {
    const name = prompt('请输入子节点名称:');
    if (name) {
      treeStore.addNode(treeStore.selectedNode.id, { name });
    }
  }
};

const removeNode = () => {
  if (treeStore.selectedNode && confirm(`确定要删除节点 "${treeStore.selectedNode.name}" 吗？`)) {
    treeStore.removeNode(treeStore.selectedNode.id);
  }
};

const expandAll = () => {
  treeStore.expandAll();
};

const collapseAll = () => {
  treeStore.collapseAll();
};

const handleSearch = () => {
  treeStore.setSearchTerm(searchTerm.value);
};

const clearSearch = () => {
  searchTerm.value = '';
  treeStore.setSearchTerm('');
};

const formatDate = (date) => {
  return new Date(date).toLocaleString();
};
</script>

<style scoped>
.tree-controls {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.control-group {
  margin-bottom: 24px;
}

.control-group h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #495057;
  font-weight: 600;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #545b62;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #c82333;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid #6c757d;
  color: #6c757d;
}

.btn-outline:hover:not(:disabled) {
  background-color: #6c757d;
  color: white;
}

.search-group {
  display: flex;
  gap: 8px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.tree-info {
  display: grid;
  gap: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.info-item .label {
  color: #6c757d;
}

.info-item .value {
  font-weight: 500;
  color: #495057;
}

.node-details {
  background: white;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.detail-item {
  margin-bottom: 6px;
  font-size: 14px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item strong {
  color: #495057;
}
</style>